<template>
  <el-card>
    <my-bread level1="商品管理" level2="商品列表添加"></my-bread>
    <el-alert title="添加商品信息" type="success" center show-icon>
    </el-alert>
    <el-steps :active="1*active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
    </el-steps>
    <el-form label-position="top" label-width="80px" :model="form" style="height: 400px;overflow: auto;">
      <el-tabs v-model="active" tab-position="left" @tab-click="handleClick">
        <el-tab-pane name="1" label="基本信息">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="form.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="form.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="form.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-cascader expand-trigger="hover" clearable :options="options" :props="defaultProps" v-model="selectOptions"
              ></el-cascader>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="2" label="商品参数">
          <el-form-item :label="item.attr_name" v-for="(item ,key) in this.arrDyprams" :key="key">
            <el-checkbox-group v-model="item.attr_vals">
              <el-checkbox border :label="item1" v-for="(item1 ,key) in item.attr_vals" :key="key"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="3" label="商品属性">
          <el-form-item :label="item.attr_name" v-for="(item ,key) in this.arrStaticprams" :key="key">
            <el-input v-model="item.attr_vals"></el-input>
          </el-form-item>

        </el-tab-pane>
        <el-tab-pane name="4" label="商品图片">
          <el-form-item label="">
            <el-upload class="upload-demo" action="http://localhost:8887/api/private/v1/upload" :headers="header"
              :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="5" label="商品内容">
          <el-form-item>
            <el-button @click="addGoods()" type="primary">点我-添加商品</el-button>
            <quill-editor v-model="form.goods_introduce">
            </quill-editor>
          </el-form-item>

        </el-tab-pane>
      </el-tabs>
    </el-form>

  </el-card>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
  quillEditor
} from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      active: '1',
      /**
         * goods_name      | 商品名称                                          | 不能为空 |
        | goods_cat       | 以为','分割的分类列表                             | 不能为空 |
        | goods_price     | 价格                                              | 不能为空 |
        | goods_number    | 数量                                              | 不能为空 |
        | goods_weight    | 重量                                              | 不能为空 |
        | goods_introduce | 介绍                                              | 可以为空 |

        | pics            | 上传的图片临时路径（对象）                        | 可以为空 |
        | attrs           | 商品的参数（数组），包含 `动态参数` 和 `静态属性` | 可以为空 |
         */
      form: {
        goods_cat: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [],
        attrs: []

      },
      selectOptions: [],
      goodcheckList: [],
      options: [],

      defaultProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      },
      arrDyprams: [],
      arrStaticprams: [],
      header: {
        Authorization: localStorage.getItem('token')
      }
    }
  },
  created () {
    this.queryGoodCategory()
  },
  methods: {
    async addGoods () {
      this.form.goods_cat = this.selectOptions.join(',')
      let arr1 = this.arrDyprams.map((item) => {
        return {attr_id: item.attr_id, attr_value: item.attr_vals}
      })
      let arr2 = this.arrStaticprams.map((item) => {
        return {attr_id: item.attr_id, attr_value: item.attr_vals}
      })
      this.form.attrs = [...arr1, ...arr2]

      const res = await this.$http.post('goods', this.form)
      console.log(res)
      this.$router.push({
        name: 'goods'
      })
    },
    handleRemove (file) {
      // file.response.data.tmp_path
      console.log('remove')
      let index = this.form.pics.findIndex((item) => {
        return file.response.data.tmp_path === item.pic
      })
      this.form.pics.splice(index, 1)
      console.log(this.form.pics)
    },
    handleSuccess (file) {
      // file.data.tmp_path
      console.log('success')
      this.form.pics.push({
        pic: file.data.tmp_path
      })
    },

    async handleClick () {
      if (this.active === '2') {
        if (this.selectOptions.length !== 3) {
          this.$message.success('请选择商品类别')
          return
        }
        const res = await this.$http.get('categories/' + this.selectOptions[2] + '/attributes?sel=many')
        this.arrDyprams = res.data.data
        this.arrDyprams.forEach(item => {
          item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.trim().split(',')
        })
      } else if (this.active === '3') {
        if (this.selectOptions.length !== 3) {
          this.$message.success('请选择商品类别')
          return
        }
        const res = await this.$http.get('categories/' + this.selectOptions[2] + '/attributes?sel=only')
        console.log(res)
        this.arrStaticprams = res.data.data
      }
    },
    async queryGoodCategory () {
      const res = await this.$http.get('categories?type=3')
      this.options = res.data.data
    }
  }

}
</script>

<style>
  .ql-editor {
    height: 300px;
  }
</style>
